<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
  <h:body>
    <ui:composition template="/template/base.xhtml">
      <ui:define name="content">
        <h:form id="ciudad-form">
          <p:growl id="growl" showDetail="true" sticky="true" />

          <p:dataTable id="dtCiu" var="ciudad" value="#{ciudadBean.ciudades}"
                       rows="10" paginator="true" paginatorPosition="bottom"
                       paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                       rowsPerPageTemplate="5,10,15"
                       selection="#{ciudadBean.ciudadSelected}" rowKey="#{ciudad}"
                       selectionMode="single">

            <p:ajax event="rowSelect" listener="#{ciudadBean.onRowSelect}" />

            <p:column headerText="Ciudad" sortBy="#{ciudad.descripcion}">
              <h:outputText value="#{ciudad.descripcion}" />
            </p:column>
            <f:facet name="footer">
              <p:commandButton process="dtCiu" icon="ui-icon-document"
                               value="Agregar" oncomplete="PF('dlgCiuAdd').show()" />
              <p:commandButton process="dtCiu" icon="ui-icon-pencil"
                               value="Editar" oncomplete="PF('dlgCiuEdit').show()"
                               update=":PdglCiuEdit" 
                               disabled="#{ciudadBean.bloquearBotones}"/>
              <p:commandButton process="dtCiu" icon="ui-icon-trash"
                               value="Borrar" actionListener="#{ciudadBean.deleteCiudad}"
                               update="dtCiu"
                               disabled="#{ciudadBean.bloquearBotones}">
                <p:confirm header="Borrar Ciudad"
                           message="Estas seguro que queres borrar?" icon="ui-icon-alert" />
              </p:commandButton>
            </f:facet>
          </p:dataTable>

          <p:confirmDialog global="true" showEffect="fade"
                           hideEffect="explode">
            <p:commandButton value="Si" type="button"
                             styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
            <p:commandButton value="No" type="button"
                             styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
          </p:confirmDialog>

        </h:form>

        <p:dialog header="Ciudad seleccionada" id="PdlgCiuAdd"
                  widgetVar="dlgCiuAdd" modal="true" showEffect="fade" 
                  hideEffect="fade" resizable="false">
          <h:form id="form-add">
            <p:panelGrid columns="2" columnClasses="column">
              <p:outputLabel value="Ciudad" for="ciudad" />
              <p:inputText id="ciudad" required="true"
                           value="#{ciudadBean.descripcion}" />
            </p:panelGrid>
            <p:commandButton process="form-add" value="Guardar" action="#{ciudadBean.addCiudad}"
                             style="text-align:right; float:right"
                             onclick="PdlgCiuAdd.hide()" oncomplete=""
                             update=":ciudad-form:dtCiu,:ciudad-form:growl">

            </p:commandButton>
          </h:form>

        </p:dialog>

        <p:dialog header="Ciudad seleccionada" id="PdglCiuEdit"
                  widgetVar="dlgCiuEdit" modal="true" showEffect="fade"
                  hideEffect="fade" resizable="false">

          <p:panelGrid columns="2" columnClasses="column">
            <h:form id="form-edit">
              <p:outputLabel value="Ciudad" for="ciudadEdit" />
              <p:inputText id="ciudadEdit" required="true"
                           value="#{ciudadBean.descripcion}" />
              <p:spacer />
              <p:commandButton value="Guardar" action="#{ciudadBean.editCiudad}"
                               style="text-align:right; float:right" onclick="dlgCiuEdit.hide()"
                               update=":ciudad-form:dtCiu,:ciudad-form:growl">

              </p:commandButton>
            </h:form>
          </p:panelGrid>

        </p:dialog>

      </ui:define>


    </ui:composition>

  </h:body>
</html>